<template>
  <div id='tmpl'>
      <!--分类列表-->
      <div id="cates">
            <ul v-bind="{style:'width:'+ulwidth+'px'}">
                <li :class="{active:isActive==0}" @click="getimglist(0)">全部</li>
                <li :class="{active:isActive==item.id}" v-for="(item,index) in cates" :key="index" @click="getimglist(item.id)">{{item.title}}</li>
          </ul>
      </div>

      <!--图片列表-->
      <div id="imglist">
            <ul>
                <li v-for="(item,index) in imglist" :key="index">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img :src="item.img_url" v-lazy="item.img_url" >
                         <div class="desc">
                            <h4>{{item.title}}</h4>
                            <div>{{item.zhaiyao}}</div>
                        </div>
                    </router-link>
                </li>
            </ul>
      </div>
  </div>
</template>
<script>

import common from '../../kits/common.js';
import {Toast} from 'mint-ui';

export default {
  data () {
    return {
        id:0,
        cates:[],
        ulwidth:'',
        imglist:[],
        isActive:''
    };
  },
  created(){
    this.id = this.$route.params.id;
    this.getCate();
    // var all = 0;
    this.getimglist(0);
  },
  methods:{
      getCate(){
        var url = common.apidomain + '/api/getimgcategory';
        this.$http.get(url).then(function (res) {
            var data = res.body;
            if(data.status!=0){
                Toast(data.message);
                return ;
            }
            this.cates = data.message;
            var w = 66;
            var count = this.cates.length;
            this.ulwidth = w*(count+1);
        })
      },
       getimglist(id){
        this.isActive = id;
         var url = common.apidomain + '/api/getimages/'+id;
         this.$http.get(url).then(function (res) {
             var data = res.body;
             if(data.status !=0 ){
                 Toast(data.message);
                 return;
             }
             this.imglist = data.message;
         })
    }
  }
 
}
</script>
<style lang="css" scoped>
    #cates {
        color: #0094ff;
        font-size: 14px;
        max-width: 400px;
        overflow:auto;
    }
    #cates ul {
        width: 900px;
    }
    #cates li {
        display: inline-block;
        padding: 5px;
        cursor: pointer;
    }
   #cates .active {
       background-color: #ccc;
       border-radius: 5px;
   }

    #imglist img {
        width: 100%;
        height: 300px;

    }
    #imglist li {
        position: relative;
    }
    #imglist .desc {
        position: absolute;
        bottom: 10px;
        left:0;
        background-color: rgba(0, 0, 0, .4);
        color: #fff;
        font-size: 14px;
        max-height: 100px;
        overflow: auto;
        padding: 10px;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>